<template>
    <div class="tools-header">
      <button class="openModalBtn" @click="addStudent">添加学生</button>
      <button class="openModalBtn" @click="delSelectedStudent">删除</button>
      <div>
        <input
          v-model.trim="keyword"
          type="text"
          name="keyword"
          class="keyword"
          placeholder="Search by name"
        />
        <button @click="generateSearchData" type="button" class="searchBtn">搜索</button>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  export interface IStudent {
    id: string | number;
    name: string;
    gender: string;
    hobbies: string;
    email: string;
    phone: string;
    age: number | string;
    create_at?: string;
    update_at?: string;
    selected?: boolean;
  }
  
  export type PIStudent = Partial<IStudent>;
  
  const keyword = ref('');
  const selectedStudents = ref<IStudent[]>([]);
  
  const generateSearchData = () => {
    console.log('Search for:', keyword.value);
  };
  
  const addStudent = () => {
    console.log('Add student action triggered');
  };
  
  const delSelectedStudent = () => {
    console.log('Delete selected students action triggered', selectedStudents.value);
  };
  </script>
  
  <style scoped>
  .tools-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  
    .openModalBtn {
      background-color: #4caf50;
      color: #fff;
      padding: 10px 20px;
      font-size: 16px;
      border-radius: 4px;
  
      &:hover {
        background-color: #45a049;
      }
    }
  
    div {
      display: flex;
      align-items: center;
  
      .keyword {
        padding: 8px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-right: 10px;
      }
  
      .searchBtn {
        background-color: #2196f3;
        color: #fff;
        padding: 8px 16px;
        font-size: 16px;
        border-radius: 4px;
  
        &:hover {
          background-color: #1976d2;
        }
      }
    }
  }
  </style>